<template>
    <el-dialog v-model="dialogVisible" width="350" style="border-radius: 20px; text-align: center;">
        <div class="container">
            <form class="form" v-loading="isLoading" element-loading-text="正在登录~">
                <div class="tit">{{ showSelectRole ? '选择登录角色' : '登录' }}</div>
                <div class="login" v-if="!showSelectRole">
                    <input type="text" placeholder="账号" v-model="form.userNo" />
                    <span class="prompt">{{ prompt.userNo }}</span>
                    <input type="password" placeholder="密码" autocomplete="off" v-model="form.password" />
                    <span class="prompt">{{ prompt.password }}</span>
                    <div class="code">
                        <input type="text" placeholder="验证码" v-model="form.captcha" />
                        <img @click="getCaptchaImage()" alt="图片无法显示" :src="captchaImage">
                    </div>
                    <span class="prompt">{{ prompt.captcha }}</span>
                </div>
                <div class="selectRole" v-else>
                    <el-select clearable v-model="form.roleId" placeholder="请选择登录角色" size="large">
                        <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName"
                            :value="item.roleId" />
                    </el-select>
                    <span class="prompt">{{ prompt.roleId }}</span>
                </div>
                <button type="button" @click="showSelectRole ? selectRole() : login()">
                    {{ showSelectRole ? '确认' : '登录' }}
                </button>
                <span v-if="showSelectRole"><a href="#/ai" @click="backLogin()">返回登录</a></span>
            </form>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import api from '@/api'
import VueEvent from '@/utils/event.js'

const dialogVisible = ref(false)
const isLoading = ref(false)
const captchaImage = ref()
const prompt = ref({})
const form = ref({})
const roleData = ref([])
const showSelectRole = ref(false)

//获取验证码
const getCaptchaImage = async () => {
    const res = await api.get('/author/captchaImage')
    if (res.data.code === 200) {
        captchaImage.value = res.data.data.code
        form.value.key = res.data.data.key
    } else {
        ElMessage.error(res.data.msg)
    }
}
const emit = defineEmits(['sendData']);
//登录
const login = async () => {
    //校验参数
    const flag = verifyForm()
    if (flag) {
        return
    }
    isLoading.value = true
    //加密
    const userNo = btoa(form.value.userNo)
    const password = btoa(form.value.password)
    const param = {
        "userNo": userNo,
        "password": password,
        "captcha": form.value.captcha,
        "key": form.value.key,
    }
    const res = await api.post('/author/login', param)
    if (res.data.code === 200) {
        const userInfo = res.data.data
        if (userInfo.token) {
            localStorage.setItem("access-admin", JSON.stringify(userInfo))
            dialogVisible.value = false
            form.value = {}
            emit('sendData', userInfo)
        } else {
            roleData.value = userInfo.roles
            showSelectRole.value = true
        }
    } else {
        getCaptchaImage()
        ElMessage.error(res.data.msg)
    }
    isLoading.value = false
}

//校验登录参数
const verifyForm = () => {
    let flag = false
    prompt.value = {}
    if (!form.value.userNo) {
        prompt.value.userNo = '登录账号不能为空！'
        flag = true
    }
    if (!form.value.password) {
        prompt.value.password = '登录密码不能为空！'
        flag = true
    }
    if (!form.value.captcha) {
        prompt.value.captcha = '验证码不能为空！'
        flag = true
    }
    return flag
}
//选择角色
const selectRole = async () => {
    if (!form.value.roleId) {
        prompt.value.roleId = '请选择角色'
        return
    }
    isLoading.value = true
    //加密
    const userNo = btoa(form.value.userNo)
    const password = btoa(form.value.password)
    const param = {
        "userNo": userNo,
        "password": password,
        "roleId": form.value.roleId,
    }
    const res = await api.post('/author/token', param)
    if (res.data.code === 200) {
        const userInfo = res.data.data
        localStorage.setItem("access-admin", JSON.stringify(userInfo))
        dialogVisible.value = false
        form.value = {}
        emit('sendData', userInfo)
    } else {
        ElMessage.error(res.data.msg)
    }
    isLoading.value = false
}
const backLogin = () => {
    getCaptchaImage();
    form.value = {}
    showSelectRole.value = false;
}
onMounted(() => {
    VueEvent.on("dialogVisible", (data) => {
        dialogVisible.value = data
        getCaptchaImage()
    })
})
</script>
<style scoped lang="less">
.container {
    /* 弹性布局 居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    .form {
        z-index: 1;
        border-radius: 15px;
        /* 弹性布局 垂直排列 */
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 400px;

        .tit {
            font-size: 26px;
            margin: 0 auto 34px auto;
        }

        .login {
            /* 弹性布局 垂直排列 */
            display: flex;
            flex-direction: column;
            align-items: center;

            input {
                width: 280px;
                height: 30px;
                text-indent: 8px;
                border: none;
                border-bottom: 1px solid #ddd;
                outline: none;
                margin: 12px auto;
            }

            .code {
                display: flex;
                align-items: center;

                input {
                    width: 180px
                }

                img {
                    width: 100px;
                    height: 20px;
                    cursor: pointer;

                }
            }

        }

        .selectRole {
            width: 280px;
            margin-bottom: 12px;
        }

        button {
            width: 280px;
            height: 40px;
            margin: 35px auto 40px auto;
            border: none;
            background: linear-gradient(-200deg, var(--sub-theme-color), var(--theme-color));
            color: #fff;
            font-weight: bold;
            letter-spacing: 8px;
            border-radius: 10px;
            cursor: pointer;
            /* 动画过渡 */
            transition: 0.5s;
        }

        button:hover {
            background: linear-gradient(-200deg, var(--theme-color), var(--sub-theme-color));
            background-position-x: -280px;
        }

        span {
            font-size: 12px;
        }

        a {
            color: var(--theme-color);
            text-decoration: none;
        }

        .prompt {
            text-align: left;
            line-height: 12px;
            height: 12px;
            width: 280px;
            color: red;
        }
    }
}
</style>